<template>
  <div>
    <el-row class="margin-bottom" >
      <el-form :inline="true">
        <el-form-item label="类加载器">
          <classloader-chose v-model="loaderName"  />
        </el-form-item>
        <el-form-item label="Maven Settings">
          <connect-chose module="maven" v-model="settings"/>
        </el-form-item>
      </el-form>

    </el-row>
    <el-row>
      <el-col :span="8">
          <el-upload
            ref="multiUpload"
            :auto-upload="false"
            action="#"
            :file-list="fileList"
            accept=".class, .java, .zip, .jar, .xml"
            :multiple="true"
            :on-change="handleChange"
          >
            <el-button slot="trigger" size="small" icon="el-icon-plus" type="plain">本地上传</el-button>
          </el-upload>

      </el-col>
      <el-col :span="16">
        <pom-edit ref="pomValue"/>
      </el-col>
    </el-row>

    <el-dialog append-to-body :visible.sync="dialog.visible" :title="dialog.title">
      <loaded-info :upload-response="dialog.response"/>
    </el-dialog>
  </div>
</template>

<script>
import ClassloaderChose from '@/views/core/classloader/ClassloaderChose'
import ConnectChose from '@/views/components/ConnectChose'
import loadedInfo from '@/views/core/classloader/loadedInfo'
import PomEdit from '@/views/core/classloader/PomEdit'

import core from '@/api/core'

export default {
  name: 'uploadMulti',
  components: {ClassloaderChose,ConnectChose , loadedInfo, PomEdit},
  props: {
    classloaderName: String
  },
  data(){
    return {
      dialog: {
        visible: false,
        title:'上传结果',
        response: {}
      },
      loaderName: null,
      fileList: [],
      settings: null
    }
  },
  methods: {
    handleChange(file,fileList){
      // 排除重复文件
      // console.log(fileList,'fileList')
      let deWeightThree = () => {
        let map = new Map();
        for (let item of fileList) {
          if (!map.has(item.name)) {
            map.set(item.name, item);
          }
        }
        return [...map.values()];
      }

      // console.log(deWeightThree(),'filter repeat ')
      this.fileList = deWeightThree()
    },
    submit(){
      let formData = new FormData()
      if (this.fileList && this.fileList.length > 0){
        for (let i = 0; i < this.fileList.length; i++) {
          let item = this.fileList[i]
          formData.append('files',item.raw,item.name)
        }
      }
      let pomValue = this.$refs.pomValue.getValue()
      formData.append('classloaderName',this.classloaderName)
      formData.append('pomContent',pomValue)

      return new Promise((resolve,reject) => {
        core.uploadMulti(formData,this.settings).then(res => {
          this.dialog.response = res.data
          this.dialog.visible = true
          resolve()
        })
      })
    }
  },
  mounted() {
    this.loaderName = this.classloaderName
  },
  watch: {
    classloaderName: {
      handler(value){
        this.loaderName = value
      }
    }
  }
}
</script>

<style scoped>

</style>
